<link rel="stylesheet" type="text/css" href="/mes.css">
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.msglist li').click(function(){
        jQuery('.msglist li').each(function(){ jQuery(this).removeClass('selected')});
        jQuery(this).addClass('selected');
        
        // for mobile
        jQuery('.msglist').click(function(){
            if(jQuery(window).width() < 480) {
                jQuery('.messageright, .messagemenu .back').show();
                jQuery('.messageleft').hide();
            }
        });
        
        jQuery('.messagemenu .back').click(function(){
            if(jQuery(window).width() < 480) {
                jQuery('.messageright, .messagemenu .back').hide();
                jQuery('.messageleft').show();
            }
        });
    });
});
</script> <!--code nhấn chọn-->

<script>

$(document).ready(function() {
    $("a[id^='link']").click(function() {
        id = $(this).attr("id");
        $.ajax ({
            url: 'test.php',
            type: 'POST',
            data: "id=" + id,
            async: true,
            success: function(data) {
                $('#more').html(data);
            }
        });
    });
});
</script> <!-- ajax -->


<div class="content">
    <div class="messagepanel">
        <div class="messagehead">
            <button class="btn btn-success btn-large">Compose Message</button>
        </div><!--messagehead-->
        <div class="messagemenu">
            <ul>
                <li class="back"><a><span class="iconfa-chevron-left"></span> Back</a></li>
                <li class="active"><a href=""><span class="iconfa-inbox"></span> Inbox</a></li>
                <li><a href=""><span class="iconfa-plane"></span> Sent</a></li>
                <li><a href=""><span class="iconfa-edit"></span> Draft</a></li>
                <li><a href=""><span class="iconfa-trash"></span> Trash</a></li>
            </ul>
        </div>
        <div class="messagecontent">
            <div class="messageleft">
                <form class="messagesearch">
                    <input type="text" class="input-block-level" placeholder="Search message and hit enter...">
                </form>
                <ul class="msglist">
                <?php 
                    while($rows = mysql_fetch_array($r)) 
                    {
                        echo "<li class='selected'>";
                        echo "<div class='thumb'>";
                        echo "<img src='images/photos/thumb1.png' alt=''></div>";
                        echo "<div class='summary'>";
                        echo "<span class='date pull-right'>";
                        echo "<small>April 03, 2013</small></span>";
                        echo "<h4><a href='#' id=link{$rows['id_gop_y']}>";
                        echo "{$rows['ho_ten']}";
                        echo "</a></h4>";
                        echo "<p><strong>Lorem ipsum dol..</strong> - Hey, leevanjo doloe..</p>";
                        echo "</div>";
                        echo "</li>";
                    }
                ?>
                </ul>
            </div><!--messageleft-->
            <div class="messageright">
               <div id="more">
               </div>
                
            </div><!--messageright-->
        </div><!--messagecontent-->
    </div>
</div>